<template>
  <div class="bgc-fff">
    <div class="teamInfo">
      <div class="teamInfo-price">
        <p>
          拼团价：¥{{info.spell_price}}
          <span>¥{{actualPrice}}</span>
        </p>
        <span>已有{{studyNum}}人在学</span>
      </div>
      <div class="teamInfo-rule">
        <span>{{info.spell_num}}人团：</span>
        满足{{info.spell_num}}人可成团，开团后{{info.valid_time}}小时内人数不足自动退款
      </div>

      <TimeOut
        :endTime="info.end_time"
        :nowTime="info.now_time"
        :startTime="info.start_time"
        @time-over="timeover"
        style="margin-top:.1rem;"
      ></TimeOut>

      <div class="flow-content">
        <div class="flow-item">
          <div class="item-title">
            <i class="num-icon">1</i>
            <p>选择课程</p>
            <i class="line-icon"></i>
          </div>
          <div class="item-desc">付款开团/参团</div>
        </div>
        <div class="flow-item">
          <div class="item-title">
            <i class="num-icon">2</i>
            <p>邀请并等待好友</p>
            <i class="line-icon"></i>
          </div>
          <div class="item-desc">支付参团</div>
        </div>
        <div class="flow-item">
          <div class="item-title">
            <i class="num-icon">3</i>
            <p>达到人数</p>
            <i class="line-icon"></i>
          </div>
          <div class="item-desc">拼团成功</div>
        </div>
      </div>
    </div>
    <div class="teamInsert" v-if="is_insertTeam">
      <p class="teamInsert-title">小伙伴们都在拼单，赶快加入吧～</p>
      <ul>
        <li v-for="(item,index) in user" :key="item.spell_items_id">
          <div class="teamInsert-content">
            <img :src="item.head_face">
            <p>
              <span>{{item.head_nickname}}</span>
              <span
                class="dan"
              >还差{{item.group_num - item.order_group_num}}人，剩余{{ endTime[index] |format }}</span>
            </p>
          </div>
          <button @click="toDetail(item.spell_items_id)">去参团</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { getGroupJoin } from "api/api";
import TimeOut from "components/groupbuy/TimeOut";
export default {
  props: {
    info: {
      type: Object
    },
    user: {
      type: Array
    },
    actualPrice: {
      type: String
    },
    studyNum: {
      type: Number
    },
    // 存在就是就是课程
    goodsType: {
      type: Number,
      default: null
    },
    // 课程或直播 id
    cid: [String, Number],
    //加入拼团、vip、购买，隐藏去参团
    is_insertTeam: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      endTime: []
    };
  },
  created() {
    if (this.user.length > 0) {
      this.user.forEach((item, index, array) => {
        this.endTime.push(item.end_time - item.now_time);
      });
      let that = this;
      this.time1 = setInterval(() => {
        let i = 0;
        this.endTime = this.endTime.map(function(item, index, array) {
          if (item > 0) {
            return item - 1;
          } else {
            // 去参团有一项结束了刷新页面数据
            clearInterval(that.time1);
            that.$emit("reload");
            return false;
          }
        });
      }, 1000);
    }
  },

  destroyed() {
    clearInterval(this.time1);
  },
  filters: {
    format(time) {
      //定义变量 h,m,s保存倒计时的时间
      let h, m, s;
      if (time >= 0) {
        h = Math.floor((time / 60 / 60) % 24);
        m = Math.floor((time / 60) % 60);
        s = Math.floor(time % 60);
      }
      //将0-9的数字前面加上0
      h = checkTime(h);
      m = checkTime(m);
      s = checkTime(s);
      function checkTime(i) {
        if (i < 10) {
          i = "0" + i;
        }
        return i;
      }
      return `${h}:${m}:${s}`;
    }
  },
  methods: {
    timeover() {
      this.$emit("reload");
    },
    // 去参团跳支付页面
    toDetail(id) {
      if (this.goodsType) {
        window.location.href =
          "/wechat/ordersubmit/orderSubmit?type=course&id=" +
          this.cid +
          "&goods_type=" +
          this.goodsType +
          "&group=join&group_join_id=" +
          id;
      } else {
        window.location.href =
          "/wechat/ordersubmit/orderSubmit?type=live&id=" +
          this.cid +
          "&group=join&group_join_id=" +
          id;
      }
    }
  },
  components: {
    TimeOut
  }
};
</script>

<style scoped  lang="scss">
@import "~assets/scss/mixin";
.teamInfo {
  width: 3.51rem;
  margin: -0.12rem auto 0;
  &-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.2rem;
    p {
      &:nth-child(1) {
        color: $blue;
        font-size: 14px;
        span {
          margin-left: 0.04rem;
          text-decoration: line-through;
        }
      }
    }
    span {
      color: $gray;
      font-size: 12px;
    }
  }
  &-rule {
    margin-top: 0.06rem;
    @include textblock(null, 0.17rem, 10px, $gray);
    span {
      color: $black;
      font-size: 12px;
    }
  }
  &-endtime {
    margin-top: 0.1rem;
    @include textblock(null, 0.24rem, 12px, $black);
    span {
      padding: 0 0.03rem;
      @include textblock(null, 0.24rem, 16px, $blue);
      font-weight: bold;
      background-color: #eeeeee;
      margin: 0 0.04rem;
    }
  }
}
.teamInsert {
  padding: 0.12rem 0.12rem 0.19rem;
  border-top: 0.06rem solid #f6f6f6;
  &-title {
    @include textblock(null, 0.17rem, 12px, $gray);
  }
  &-content {
    display: flex;
    p {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    span {
      &:nth-child(1) {
        @include textblock(null, 0.2rem, 14px, $black);
      }
      &:nth-child(2) {
        @include textblock(null, 0.17rem, 12px, $gray);
      }
    }
  }
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.18rem;
    img {
      height: 0.4rem;
      width: 0.4rem;
      border-radius: 50%;
      margin-right: 0.06rem;
    }
    button {
      @include button(0.68rem, 0.28rem, 14px, $blue, 0.24rem, #fff, 4px);
      border: 1px solid $blue;
      padding: 0;
    }
  }
}

.flow-content {
  display: flex;
  margin-top: 0.12rem;
  padding-bottom: 0.12rem;
  .flow-item {
    .item-title {
      display: flex;
      align-items: center;
      .num-icon {
        width: 0.16rem;
        height: 0.16rem;
        border: 0.01rem solid rgba(229, 229, 229, 1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.11rem;
        color: rgba(192, 196, 204, 1);
        margin-right: 0.06rem;
      }
      p {
        font-size: 0.1rem;
        font-weight: 500;
        color: rgba(48, 49, 51, 1);
      }
      .line-icon {
        width: 0.48rem;
        height: 0.01rem;
        background: rgba(229, 229, 229, 1);
        margin-left: 0.06rem;
        margin-right: 0.06rem;
      }
    }
    .item-desc {
      font-size: 0.1rem;
      color: rgba(96, 98, 102, 1);
      margin-left: 0.22rem;
      margin-top: 0.02rem;
    }
    &:last-child {
      .line-icon {
        display: none;
      }
    }
  }
}
</style>